import { Component } from 'react';
import { ButtonGroup,Button,AnchorButton, Icon } from '@blueprintjs/core';
import styles from './Tool.less';
import classNames from 'classnames';
import BasemapPicker from './Basemap';

export default class Tool extends Component {
    constructor(props) {
        super(props);
		this.state = {
			
		}
    }

    handleMeasure = (type) => {
        const {map} = this.props;
        if(!map || !map.measureTool) return;
        const tool = map.measureTool;
        tool.activate(type);
    }

    clear = () => {
        const {map} = this.props;
        if(!map || !map.measureTool) return;
        map.measureTool.deactivate();

        const sources = [
            "searchSource", 
            "locateSource", 
            "atlasdata-ext-locateSource"
        ];
        sources.map((sourceId) => {
            const source = map.getSource(sourceId);
            if(source) {
                source.setData({
                    type: "FeatureCollection",
                    features: []
                });
            }
        });
        const layers = map.getStyle().layers;
        layers.forEach((layer) => {
            if(layer.id.indexOf("dmdz-layer-street-") >=0) {
                map.removeLayer(layer.id);
            }
        });
    }

    render() {
        return (
			<ul className={classNames(styles.main, "clearfix")}>
                <li><BasemapPicker /></li>
                <li onClick={() => { this.handleMeasure("area") }}><a title="测面" className={styles.area}></a></li>
                <li onClick={() => { this.handleMeasure("distance") }}><a title="测距" className={styles.distance}></a></li>
                <li onClick={() => { this.clear() }}><a title="清除"><Icon icon="trash" /></a></li>
            </ul>
        )
    }
}
